<template>
  <div class="MToast">
      <transition-group name="trans">
        <div v-for="obj in list" :key="obj">
          <div id="border" :class="['message',(!obj.badge)?obj.color:'']">
            <span id="badge" :class="[obj.color]" v-if="obj.badge" v-html="obj.badge">
            </span>
            {{obj.content}}
          </div>
          <br>
        </div>
      </transition-group>
  </div>
</template>

<style lang="less" scoped>
    @import "~core/basic.less";

    .MToast {
      margin: 0px;
      padding: 0px;
      position: fixed;
      width: 100%;
      height: auto;
      left: 0px;
      bottom: 30*@gird;
      pointer-events: none;
      text-align: center;
      opacity: 0.96
    }

    .message {
      display: inline-block;
      margin: @gird;
      background: @white;
      padding: 2*@gird;
      box-shadow: @shadow-3;
      max-width: 320px;
      word-break: break-all;

      .noselect();
    }

    .main[id=border] {
      border-left:4px solid @color;
    }

    .sub[id=border] {
      border-left:4px solid @subcolor;
    }

    .danger[id=border]{
      border-left:4px solid @danger;
    }

    .main[id=badge] {
      background: @color;
      box-shadow: 0 0 0 4px @color;
    }

    .sub[id=badge] {
      background: @subcolor;
      box-shadow: 0 0 0 4px @subcolor;
    }

    .danger[id=badge]{
      background: @danger;
      box-shadow: 0 0 0 4px @danger;
    }

    #badge {
      display: inline-block;
      margin-right: @gird;
      color: @white;
      width:24px;
      height:24px;
      border-radius: 24px;
    }

    .trans-leave-active {
      opacity: 0;
      transform: translate(0px,-50px);
      transition: all 500ms @ease-leave;
    }

    .trans-enter-active{
      transform: translate(0px,0px);
      transition: all 500ms @ease-strong;
    }
    .trans-enter {
      opacity: 0;
      transform: translate(0px,50px);
    }

    .trans-move{
      transition: transform 0.5s @ease-strong;
    }
</style>

<script>
  export default {
    data:function(){
      return {
        list:[]
      }
    },
    mounted:function(){
      if(!!this.mirror.instance.get("core_toast")){
        return;
      }
      this.mirror.instance.set("core_toast",this)
    }
  }
</script>